<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>报名线下跑</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/sign.css">
    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<body>
<div class="container">
    <div class="top">
        <img src="./img/sign-bg.png" alt="" width="100%">
    </div>
    <div class="field-list">
        <div class="field-item">
            <div class="label">请输入您的昵称</div>
            <div class="input-box">
                <input type="text" placeholder="">
            </div>
        </div>
        <div class="field-item">
            <div class="label">请输入您的毕业年份</div>
            <div class="input-box">
                <img src="./img/icon-calender.png" alt="" width="10">
                <input type="text" placeholder="" id="year">
            </div>
        </div>
        <div class="field-item">
            <div class="label">请输入你的联系方式（用于联系与短信通知）</div>
            <div class="input-box">
                <input type="text" placeholder="">
            </div>
        </div>
        <div class="field-item">
            <div class="label">请输入你的衣服尺码（用于纪念衫的发放）</div>
            <div class="input-box">
                <img src="./img/icon-size.png" alt="" width="10">
                <input type="text" placeholder="" id="size">
            </div>
        </div>
        <div class="field-item">
            <div class="label">请输入你的邮寄地址</div>
            <div class="input-box">
                <input type="text" placeholder="">
            </div>
        </div>
    </div>
    <div class="bottom flex-bottom">
        <div class="btn ghost" style="margin-right: 20px;">立即报名（131）元</div>
        <div class="btn primary">GY加油包</div>
    </div>
    <div class="note">
        <div class="title">报名事项：</div>
        <div class="note-item">1.报名成功后，请联系指引中的工作人员</div>
        <div class="note-item">2.我们将定时同步不同渠道参与线下跑的名单，确保名单准确性</div>
        <div class="note-item">3.请勿重复报名</div>
    </div>
</div>
</body>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script>
    var years = []
    var tempArr = []
    var year = Number(new Date().getFullYear())
    for (var i = 1950; i <= year; i++) {
        var temp = String(i).substr(2, 2)
        tempArr.push({
            title: i + `（${temp}届）`,
            value: i,
        })
    }
    for (var j = tempArr.length - 1; j >= 0; j--) {
        years.push(tempArr[j])
    }

    $('#year').select({
        title: "选择毕业年份",
        items: years
    })

    $('#size').select({
        title: '选择衣服尺码',
        items: [
            {
                title: 'S',
                value: '0',
            },
            {
                title: 'M',
                value: '1',
            },
            {
                title: 'L',
                value: '2',
            },
            {
                title: 'XL',
                value: '3',
            }
        ]
    })

    $('.btn').click(function () {
        $.toast('功能尚未开放', 'text')
    })
</script>
</html>